<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <div id="app">
    <!-- <p>{{msg}}</p>
    <p>{{fx()}}</p>
    <p>{{fx()}}</p>
    <p>{{fxx}}</p>
    <p>{{fxx}}</p> -->
    <!--指令-->
    <!--内容指令-->
    <p v-text="msg"></p>
    <p v-html="html"></p>
    <!--渲染指令-->
    <p v-if="flag">if</p><!--适合长时间不使用-->
    <p v-show="flag">show</p><!--适合频繁切换-->
    <p v-for="(item,index) in list">{{item}}{{index}}</p>
    <!--属性指令-->
    <p v-bind:title="msg">花花</p><!--单向数据绑定-->
    <p :class="{active:flag}"></p><!--当 flag 为 true 时，<p> 标签会添加 active 类-->
    <!--事件指令-->
    <!-- <button v-on:click="handleClick">click</button> -->
    <button @click="handleClick()">click</button>
    <!--表单指令-->
    <input type="text" v-model="msg"></input>
    <span>{{msg}}</span>
  </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const vm=new Vue({
            el:'#app',
            data(){
                return{
                    msg:'你不好',
                    html:'<a href="https://www.baidu.com">百度</a>',
                    flag:true,
                    list:["兔子","小猫"]
                }
            },
            methods:{
                fx(){
                    console.log('方法执行了一次')
                },
                handleClick(){
                    console.log('点击了')
                }
            },
            //计算属性：重复执行时，实际上只执行1次，有缓存
            computed:{
                fxx(){
                    console.log('计算属性执行了一次')
                }
            },
            //侦听器：数据变化时，会执行，监听的数据作为函数名
            watch:{
                msg(newValue,oldValue){
                    console.log('旧数据：'+oldValue+'，新数据：'+newValue)
                }
            }
        })
    </script>
</body>
</html>